.flipper-section {
  width: 100%;
  padding: 20px 0; /* light top/bottom padding */
}

.bubble-container {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

#B01,
#B03 {
  background: #e53935;       /* Strong but elegant Red */
  color: #ffffff;            /* White text for contrast */
  box-shadow: 0 10px 25px rgba(229, 57, 53, 0.3);
}

#B02 {
  background: #f5d742;       /* Warm Yellow-Gold */
  color: #222222;            /* Deep Charcoal Text */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}


#B04,
#B06 {
  background: #f5d742;       /* Warm Yellow-Gold */
  color: #222222;            /* Deep Charcoal Text */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

#B05 {
  background: #00c851;       /* Fresh Solid Green */
  color: #ffffff;            /* White text */
  box-shadow: 0 10px 25px rgba(0, 200, 81, 0.25);
}



.bubble {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: slideLeftRight 3s ease-in-out infinite;
  cursor: pointer;
}

.bubble:nth-child(2) { animation-delay: 0.3s; }
.bubble:nth-child(3) { animation-delay: 0.6s; }
.bubble:nth-child(4) { animation-delay: 0.9s; }
.bubble:nth-child(5) { animation-delay: 1.2s; }

@keyframes slideLeftRight {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(10px); }
  50%  { transform: translateX(-10px); }
  75%  { transform: translateX(5px); }
  100% { transform: translateX(0); }
}

@media (max-width: 480px) {
  .bubble {
    width: 60px;
    height: 60px;
    font-size: 0.7rem;
  }
}